<template>
	<view>
		<view class="settle-container">
			<label class="radio" @click="checkAll">
				<radio :checked="isFullCheck" color="#f00000" value="" /><text>全选</text>
			</label>
			<view class="price-box">
				合计:<text class="all-price">￥{{checkedGoodsAmount}}</text>
			</view>
			<view class="settle-button" @click="settlement">
				结算({{checkedCount}})
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations,mapState} from 'vuex';
	import {createOrder} from "@/api/order_request.js";
	export default {
		name:"my_settle",
		data() {
			return {
				//定时器倒计时3秒
				second:3,
				//定时器
				timer:null
			};
		},
		onLoad(){
			console.log(this.$store);
		},
		computed:{
			...mapGetters('cart_m',['checkedCount','total','checkedGoodsAmount']),
			...mapState('user_m',['address','token']),
			...mapGetters('user_m',['addressStr']),
			...mapState('cart_m',['cart']),
			isFullCheck(){
				return this.total == this.checkedCount
			}
		},
		methods:{
			...mapMutations('cart_m',['updateAllGoodsState']),
			...mapMutations('user_m',['updateNavigateInfo']),
			checkAll(){
				this.updateAllGoodsState(!this.isFullCheck)
			},
			settlement(){
				//是否有总价
				// console.log(this.checkedGoodsAmount);
				// if(!this.checkedGoodsAmount) return uni.$showMsg('请选择要结算的商品');
				if(!Number(this.checkedGoodsAmount)) return uni.$showMsg('请选择要结算的商品');
				
				//是否有地址
				if(JSON.stringify(this.address) == '{}'){
					return uni.$showMsg('请填写收货地址');
				};
				//是否登录   没有登录会有提示框
				if(!this.token) return this.delayNavigate();
				
				//点击结算会创建订单编号  微信支付
				this.payOrder();
			},
			//微信支付
			async payOrder(){
				//创建订单
				const orderObj = {
					order_price : this.checkedGoodsAmount,
					consignee_addr : this.addressStr,
					//过滤goods_state为true的 并加工出每个对象为三个属性
					goods : this.cart.filter(item=>item.goods_state).map(item=>({goods_id:item.goods_id,goods_number:item.goods_count,goods_price:item.goods_price}))
				};
				const result = await createOrder(orderObj);
				console.log(result);
			},
			showTips(second){
				uni.showToast({
					icon:'none',
					title:'请先登录后再进行结算！' + second + '秒后自动跳转到登录页面',
					mask:true,
					duration:1500
				})
			},
			//延迟3秒跳转到登录页面
			delayNavigate(){
				//循环定时器  setInterVal    延时定时器  setTimeout
				//重置一下倒计时秒数  这里可以下面清除定时器后也可以
				// this.second = 3;
				this.timer = setInterval(()=>{
					this.second--;
					if(this.second<=0){
						clearInterval(this.timer);
						//清除定时器后重置second  上面和这个位置都可以
						this.second = 3;
						//second为0时清除定时器，并跳转my页面（登录页面） return
						//并且跳转成功后将跳转方式和路径的对象存储到vuex当中
						uni.switchTab({
							url:'/pages/my/my',
							success:()=>{
								//①这里用箭头函数将this指向 指向其外层
								//②如果不用箭头函数 上面就用that=this,改变一下this指向,用that调用外层this
								this.updateNavigateInfo({
									navigateType:'switchTab',
									from:'/pages/cart/cart',
								})
							}
						})
						return
					}
					this.showTips(this.second);
				},1000)
			}
		}
	}
</script>

<style lang="scss">
.settle-container{
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 50px;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 15px;
	z-index: 999;
	.radio{
		margin-left: 10px;
	}
	.price-box{
		.all-price{
			color: #c00000;
		}
	}
	.settle-button{
		background-color: #c00000;
		width: 110px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}
}
</style>
